<!--  -->
<template>
<div class="rightMain">
  <myswipt></myswipt>
  <myhotMain @aboutAdd="changeAbout" :hotnews="hotnews"></myhotMain>
  <div class="part parttwo ">
    <div class="handleBar clearfix">
      <div class="itemdiv"><el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker></div>
      <div class="totalMail itemdiv" style="display:inline">
        <span>一共<strong>{{totalMail}}</strong>封邮件</span>
        <span><strong :class="{redcolor:redcolor}" v-show="totalMail>3">您有3+以上未读邮件,</strong>请您及时处理</span>
        <button type="button" @click="addMaillist" class="el-button el-button--primary"><span>同步邮件</span></button>
        <button type="button" @click="deteleMaillist" class="el-button el-button--danger"><span>清空邮件列表</span></button>
      </div>
    </div>
    <myMailList :maillist="maillist" @deleOne="deleOneEvents">
      <div>这篇文章来自于微信</div>
    </myMailList>
  </div>
</div>
</template>

<script>
import myhotMain from '../rightCon/hotMain';
import myMailList from '../rightCon/maillist';
import myswipt from '../rightCon/myswipt';
export default {
  data () {
    return {
      value1:"",
       redcolor:true,
       selecons:0,
        seleinfo:[
        {vaule:0,text:"收件箱"},
        {vaule:1,text:"草稿箱"},
        {vaule:2,text:"已发送"}
      ],
      hotnews:[],
      maillist:[]
    };
    
  },
   created:function(){
      this.$axios.all([
      this.$axios.get('http://localhost:8080/static/data/maillist.json'),
      this.$axios.get('http://localhost:8080/static/data/hotnews.json')
      ]).then((res)=> {
      let [mailist,hotnews]=res;
      this.maillist = mailist['data'];
      this.hotnews = hotnews['data'];
      console.log(this.maillist)
      console.log(this.hotnews)
      }).catch(err=>{
        this.maillist = [];
        this.hotnews = [];
        console.log(err)
      });
      // this.$axios.all([
      //  this.$axios.get("/api/gethotnews"),
      //  this.$axios.get("/api/getmaillist")
      // ]).then(res=>{
      //   console.log("chengg");
      //   let [mailist,hotnews]=res;
      //   this.maillist = mailist.data.resultMock;
      //   this.hotnews = hotnews.data.resultMock;
       
      //   console.log(this.maillist)
      //   console.log(this.hotnews)
      // },err=>{
      //   console.log("shibai")
      //   console.log(err)
      //   this.maillist = [];
      //   this.hotnews = [];
      // })
  },
  components:{
    myhotMain,
    myswipt,
    myMailList
  },
  methods:{
    changeAbout(parafromHotMain){
      var aboutold = parafromHotMain.datail.about;
      var about =aboutold+1;
      parafromHotMain.datail.about=about
      alert("这篇文章被评论了"+about+"次了，真棒");
    },
    addMaillist(){
      this.maillist.push({
         h3title:"智能家居的未来如何？",
          datail:{
          context:`80年出生的刘某是贵州织金人，小学毕业后，辗转外地务工。
          今年7月初，刘某与邓某（另案处理）、王某（另案处理）商量准备通过微信搜索附近女性，
          然后加好友聊天，再把她们约出来用酒灌醉，从她们身上弄些钱财过来`
          }
        
      })
    },
    deteleMaillist(){
      this.$confirm('此操作将清空邮件列表, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.maillist=[];
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    deleOneEvents(index){
     this.$confirm('此操作将删除当前的一封邮件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.maillist.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  // 属性监听
  watch:{
    maillist(newval,oldval){
      console.log(newval)
    }
  },  
  computed:{
      totalMail(){
        return this.maillist.length;
      }
  }
}

</script>
<style scoped>
.handleBar {
  margin-bottom:10px;
}
.handleBar .itemdiv {
  float:left;
}
.totalMail{
  margin-left:120px;
}
.redcolor{
  color:red;
}
.rightMain{
  float: left;
  padding:3px;
  width:85%;
}
.eleCon {
  margin-bottom:10px;
}
.part{
  width:100%;
  margin: 10px;
}


</style>